<template>
  <div class="hedgingData_wrapper">
    <a-spin :spinning="loading">
      <div class="dealRecord" v-if="dealRecord.length !== 0">
        <div v-for="item in dealRecord" :key="item.id">
          <!-- <c-desc :data="item" :columns="dealRecordColumns(item)" :column="6">
            <template v-slot:createDate>
              <span>{{ $getTime(item.createDate) }}</span>
            </template>
          </c-desc> -->
          <template v-for="(i, idx) in dealRecordColumns(item)">
            <span class="dealRecord-item" :key="idx" v-if="!i.hidden">
              <template v-if="i.prop === 'createDate'">
                <span class="label">{{ i.label }}</span>
                <i>：</i>
                <span class="content">{{ $getTime(item.createDate) }}</span>
              </template>
              <template v-else>
                <span class="label">{{ i.label }}</span>
                <i>：</i>
                <span class="content">{{ item[i.prop] }}</span>
              </template>
            </span>
          </template>
        </div>
      </div>
      <c-empty v-else-if="!loading" />
    </a-spin>
  </div>
</template>

<script>
import { isLine } from "@/util/common";
import { providergetorderdeallog } from "@/api/order";

export default {
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
      loading: true, // 加载loading
      dealRecord: [] // 成交记录
    };
  },
  computed: {
    //   根据是否返回该字段，判断是否展示
    dealRecordColumns() {
      return data => {
        return [
          {
            label: "成交吨数",
            prop: "tradedVolume"
          },
          {
            label: "期货单号",
            prop: "orderSysId",
            hidden: !data.orderSysId
          },
          {
            label: "本地报单号",
            prop: "orderRef",
            hidden: !data.orderRef
          },
          {
            label: "合约月",
            prop: "contractId",
            hidden: !data.contractId
          },
          {
            label: "成交均价",
            prop: "tradedPrice",
            hidden: !data.tradedPrice
          },
          {
            label: "成交时间",
            span: 2,
            prop: "createDate",
            slot: "createDate"
          }
        ];
      };
    }
  },
  methods: {
    getOrderDealLog() {
      this.loading = true;
      providergetorderdeallog({
        orderId: this.data.id
      })
        .then(res => {
          if (res) this.dealRecord = res;
        })
        .finally(() => {
          this.loading = false;
        });
    }
  },
  created() {
    if (isLine()) {
      this.loading = false;
    } else {
      this.getOrderDealLog();
    }
  }
};
</script>

<style lang="scss" scoped>
.hedgingData_wrapper {
  padding: 10px 0;
  .dealRecord-item:not(:last-child) {
    margin-right: 28px;
    display: inline-block;
    width: 130px;
  }
}
</style>
